<!--
 * @Description: 考试练习列表 -- exam_practice
 * @Author: your name
 * @Date: 2023-12-08
 * @LastEditTime: 2023-12-08
 * @LastEditors: Please set LastEditors
-->

<template>
  <div>
    <div class="exam_practice heart_t">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- 考试列表 -->
        <el-tab-pane label="FRM题库" name="0">
          <!-- <div class="container">
            <div class="course_item">
              <div class="course_title">
                <span>FRM：</span>
              </div>
              <div class="content_list">
                <div
                  v-for="(item, index) in FRMList"
                  :key="index"
                  @click="classify(index)"
                >
                  <span :class="index_t == index ? 'on' : ''">
                    {{ item.content_t }}
                  </span>
                </div>
              </div>
            </div>
          </div> -->

          <!-- 内容区域 -->
          <div class="recommend recommend-body heart_w">
            <el-row>
              <el-col :span="6" v-for="(item, index) in 2" :key="item">
                <a href="javascript:void(0);">
                  <el-image
                    src="http://cremb-zsff.oss-cn-beijing.aliyuncs.com/dbb3a202103301518057631.jpg"
                  >
                  </el-image>
                  <div>
                    <div class="title">
                      初入职场老师教你10个常见的面试问题，助你节节高升
                    </div>
                  </div>
                  <div class="group">
                    <div>
                      <div class="people">776人已答题</div>
                    </div>
                    <div class="button" @click="examList(index + 1)">
                      <i class="el-icon-edit"></i>
                      答题
                    </div>
                  </div>
                </a>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>

        <!-- 练习列表 -->
        <el-tab-pane label="CFA题库" name="1">
          <!-- <div class="container">
            <div class="course_item">
              <div class="course_title">
                <span>模拟机考：</span>
              </div>
              <div class="content_list">
                <div
                  v-for="(item, index) in questionBank"
                  :key="item.cid"
                  @click="classify(index)"
                >
                  <span :class="{ on: index_t == index }">
                    {{ item.name }}
                  </span>
                </div>
              </div>
            </div>
            <div class="course_item">
              <div class="course_title">
                <span>CFA甄题库：</span>
              </div>
              <div class="content_list">
                <div
                  v-for="(item_t, index) in CFAtitleList"
                  :key="item_t.cid"
                  @click="classifyCFA(index)"
                >
                  <span :class="{ on: index_val == index }">
                    {{ item_t.name }}
                  </span>
                </div>
              </div>
            </div>
          </div> -->

          <!-- 内容区域 -->
          <div class="recommend recommend-head heart_w">
            <div class="recommend-main">
              <a
                href="javascript:void(0);"
                class="item"
                v-for="(item_a, index) in 2"
                :key="index"
                @click="testsList"
              >
                <div class="title">马克思主义基本原理概论</div>
                <div class="group">
                  <div class="total">共15题</div>
                  <div class="people">23人已答题</div>
                  <div class="button">
                    <i class="el-icon-edit"></i>
                    练习
                  </div>
                </div>
              </a>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="ACCA题库" name="2"></el-tab-pane>
        <el-tab-pane label="CPA题库" name="3"></el-tab-pane>
        <div v-if="activeName == '2'">123123</div>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getTikuList } from '@/api/course.js'
export default {
  name: 'exam_practice',
  data() {
    return {
      activeName: '0',
      index_t: 0,
      index_val: 0,
      FRMList: [
        { cid: 1, content_t: '机考中心' },
        { cid: 0, content_t: 'Part I' },
        { cid: 2, content_t: 'Part II' }
      ],
      questionBank: [
        { name: '模拟机考', cid: 100 },
        { name: 'Level I', cid: 9504 },
        { name: 'Level II', cid: 9505 },
        { name: 'Level III', cid: 696 }
      ],
      CFAtitleList: [
        { name: '2024年题库', cid: 1112 },
        { name: 'Level I', cid: 10114 },
        { name: 'Level II', cid: 10115 },
        { name: 'Level III', cid: 10116 }
      ]
    }
  },
  created() {},
  methods: {
    handleClick(tab, event) {
      console.log(tab.index, event)
    },
    classify(cid_it) {
      this.index_t = cid_it
    },
    classifyCFA(i) {
      this.index_val = i
    },
    examList(id) {
      console.log(id)
      this.$router.push({
        path: '/exam_practice/FRM/frmQuestionbank',
        query: { cid: id }
      })
    },
    // TODO: cid CFA
    testsList() {
      this.$router.push({
        path: '/exam_practice/CFA/questionbank',
        query: { cid: 9224 }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.heart_t {
  width: 1250px;
  margin: 0 auto;
}
.exam_practice {
  background-color: #fff;
  border-radius: 8px;
  margin-top: 20px;
  margin-bottom: 30px;

  ::v-deep .el-tabs__active-bar {
    height: 3px;
    background-color: #2c8eff;
  }

  .el-tabs__item.is-active {
    color: #409eff !important;
  }

  ::v-deep .el-tabs__nav-wrap::after {
    height: 1px;
    background-color: #e1e1e1;
  }

  ::v-deep .el-tabs__header {
    margin: 0;
    background-color: #fff;
    border-radius: 8px;
  }

  ::v-deep .el-tabs__nav-wrap {
    padding: 0 30px;
  }

  ::v-deep .el-tabs__item {
    height: 62px;
    overflow: hidden;
    font-size: 16px;
    line-height: 68px;
    text-align: center;
    color: #666;
    user-select: none;
  }

  ::v-deep .el-tabs__content {
    padding: 25px;
    background-color: #fff;
  }
}

.on {
  color: #2c8eff;
}
.autoHeight {
  height: auto !important;
}

.container {
  padding: 10px 20px 0 17px;
  border-radius: 4px;
  background-color: #ffffff;
  // background-color: #f6f7fb;
  .course_item:last-child {
    .content_list:last-child {
      border-bottom: none;
    }
  }
}
.course_item {
  display: flex;
  align-items: center;

  .course_title {
    font-size: 16px;
    line-height: 60px;
    color: #969696;

    span {
      color: #010101;
      font-weight: bold;
    }
  }
}

.content_list {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
  height: 60px;
  padding: 15px 103px 0 33px;
  box-sizing: border-box;
  overflow: hidden;
  border-bottom: 1px dashed #efefef;

  div {
    height: 30px;
    margin-right: 30px;
    margin-bottom: 15px;
    line-height: 30px;
    font-size: 14px;
    color: #282828;
    span {
      cursor: pointer;
      user-select: none;
    }
  }
}

/* 考试列表 */
.recommend-body {
  .el-row a:hover {
    box-shadow: 0 2px 15px rgb(79 109 143 / 20%) !important;
  }
  .group {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 14px 20px 28px;

    .people {
      margin-top: 8px;
      font-size: 14px;
      color: #999999;
    }

    .button {
      height: 34px;
      padding: 0 19px;
      border-radius: 17px;
      background-color: #2c8eff;
      color: #ffffff;
      font-size: 16px;
      line-height: 34px;
    }
  }

  .money {
    font-size: 14px;
    color: #ff6b00;

    span {
      font-size: 22px;
    }
  }
}

.recommend {
  padding-bottom: 30px;
  .el-col {
    margin-bottom: 14px;
    padding: 0 7px;
  }

  .el-row {
    margin-top: 30px;
    a {
      display: block;
      border-radius: 8px;
      background-color: #fff;
      overflow: hidden;
      transition: 0.3s;
      box-shadow: 0 2px 15px rgb(79 109 143 / 20%);

      .el-image {
        display: block;
        width: 100%;
        height: 160px;
      }

      .el-image + div {
        padding: 0 15px;
      }
    }
  }

  .el-row a:hover {
    transform: translateY(-6px);
    box-shadow: 0 2px 16px rgb(79 109 143 / 12%);
  }

  .title {
    padding-top: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 16px;
    color: #333;
  }
}

/* 练习列表 */

.recommend-head {
  margin-top: 50px;
}

.recommend-main {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  margin: 30px -24px -24px 0;
  .item:hover {
    transform: translateY(-6px);
    box-shadow: 0 3px 20px rgb(0 0 0 / 7%);
  }

  .item {
    display: block;
    width: 384px;
    padding: 20px 20px 17px;
    border-radius: 8px;
    margin: 0 24px 24px 0;
    box-sizing: border-box;
    background-color: #ffffff;
    // background-color: #f6f7fb;
    box-shadow: 0 3px 20px rgb(0 0 0 / 7%);
    transition: 0.3s;

    .title {
      font-size: 18px;
      line-height: 24px;
      color: #282828;
      padding-top: 0;
    }
  }
  .group {
    display: flex;
    align-items: center;
    margin-top: 38px;

    .total {
      font-size: 16px;
      color: #ff6b00;
    }

    .people {
      flex: 1;
      margin-left: 20px;
      font-size: 14px;
      color: #999999;
    }

    .button {
      height: 30px;
      padding: 0 17px;
      border-radius: 15px;
      color: #ffffff;
      background-color: #2c8eff;
      font-size: 14px;
      line-height: 30px;
    }
  }
}
</style>
